<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>内容管理</title>
<link href="/res/back/css/base.css" rel="stylesheet" type="text/css" />
<link href="/res/third/bootstrap3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="/res/common/js/jquery.1.9.1.min.js" type="text/javascript"></script>
<script src="/res/third/artDialog/jquery.artDialog.js" type="text/javascript"></script>
<script src="/res/third/validate/jquery.validate.js" type="text/javascript"></script>
<script src="/res/third/easyUI/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/res/third/easyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<link href="/res/third/powerFloat/css/powerFloat.css" rel="stylesheet" type="text/css" />
<script src="/res/third/powerFloat/js/mini/jquery-powerFloat-min.js" type="text/javascript"></script>
<script src="/res/third/artDialog/jquery.artDialog.js" type="text/javascript"></script>
<script src="/res/third/laytpl/template.js"></script>
</head>
<body>
    <div class="panel panel-info" style="height: 100%;overflow-y:scroll;">
	       <div class="panel-heading">
	          <h3 class="panel-title">首页爆品推荐</h3>
	        </div>
        <div class="panel-body" style="overflow: hidden;border-bottom: none;">
			<form class="form-horizontal" method="post" action="/hotfloor/index_hot_product.do" style="padding-top: 15px;" accept-charset="utf-8">
		        [#if products?? && products?size > 0]
                    [#list products as product]
                    [@row seq="${product.seq}" productId="${product.hotProductId!}" productName="${product.productName!}" index="${product_index}" /]
                    [/#list]
                [#else]
                    [@row seq="" productId="" productName="" index="0"/]
                [/#if]
				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-10">
						<button type="button" class="btn btn-primary" id="subBtn">立即提交</button>
					</div>
				</div>
			</form>
        </div>
      </div>
    <script id="rows_template" type="text/html">
        [@row seq="" productId="" productName=""/]
    </script>
    [#macro row seq productId productName index="1"]
    <div class="form-group">
        <label class="col-sm-2 control-label">[#if index == "0"]爆品推荐：[/#if]</label>
        <div class="col-sm-1">
            <input type="text" class="form-control" name="seq" placeholder="序号" value="${seq}">
        </div>
        <div class="col-sm-2">
            <input type="hidden" class="form-control productId" name="productId" value="${productId}">
            <input type="text" class="form-control product" onclick="addProduct(this);" value="${productName}" name="product" readonly placeholder="选择商品">
        </div>
        <div class="col-sm-1">
            <span class="glyphicon glyphicon-plus" aria-hidden="true" onclick="addRow(this); return false;"></span>
            [#if index != "0"]
            <span class="glyphicon glyphicon-minus" aria-hidden="true" onclick="removeRow(this); return false;"></span>
            [/#if]
        </div>
    </div>
    [/#macro]
<script type="application/javascript">
	$(document).ready(function(){
        $("#subBtn").click(function(){
            // 构成请求参数
            var params = {};
            var groups = $("form").find(".form-group");
            for (var i = 0; i < groups.length-1; i++ ) {
                var $group = $(groups[i]);
                var seq = $group.find("input[name='seq']").val();
                if (!seq) {
                    alert("请填写所有序号");
                    return;
                }
                var hotProductId = $group.find("input[name='productId']").val();
                if (!hotProductId) {
                    alert("请选择商品");
                    return;
                }
                params["shopHotProducts["+i+"].seq"] = seq;
                params["shopHotProducts["+i+"].hotProductId"] = hotProductId;
            }
            console.log(params);
            $.post("/hotfloor/index_hot_product.do", params, function(){
                alert("添加成功");
                window.location.reload();
            });
        });
    });

    function addProduct(thiz) {
        var $thiz = $(thiz);
        var dialog = art.dialog({
            top: '10%',
            left: '20%',
            id: 'choose_product',
            title: "选择爆品",
            lock: true,
            width: 850,
            okVal: "确定",
            ok: function () {
                $thiz.val();
                var row = $("input[name='productId']:checked");
                $thiz.prev().val(row.val());
                $thiz.val(row.attr("data-name"));
                return true;
            },
            cancelVal: '关闭',
            cancel: true
        });
        $.ajax({
            url: '/hotfloor/choose_hot_product.do',
            success: function (data) {
                dialog.content(data);
            },
            cache: false
        });
        dialog.show();
    }

    function addRow(thiz) {
        // 判断当前数量，小于 12
        var num = $("form").find(".form-group").length;
        if (num > 12) {
            alert("爆品数量已达到最大值");
            return;
        }
        var html = template('rows_template', {});
        $(thiz).parents(".form-group").after(html);
        return false;
    }
    function removeRow(thiz) {
        $(thiz).parents(".form-group").remove();
    }
</script>
</body>
</html>
